<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 卡片头 -->
        <template #header style="color:'#409EFF">
          <span>组织架构</span>
        </template>
        <!-- 一行两列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="home" />
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-col>负责人</el-col>
              <el-col>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hAdd('')">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 自定义数组件 -->
        <el-tree :data="list" default-expand-all>
          <template v-slot="{ data, node }">
            <el-row type="flex" justify="space-between" style="width: 100%">
              <el-col :span="20">
                <i v-if="data.children[0] && node.expanded" class="el-icon-caret-right" />
                <i v-else-if="node.expanded == false" class="el-icon-caret-bottom" />
                <i v-else class="el-icon-s-custom" />
                {{ data.name }}
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <el-col>
                    {{ data.manager }}
                  </el-col>
                  <el-col>
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        操作<i class="el-icon-arrow-down el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hAdd(data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hEdit(data.id)">修改部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hDelete(data.id,data.children)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>

      <!-- 自定义弹出窗 -->
      <el-dialog v-if="dialogVisible" :title="title" :visible="true" :before-close="closeDialog">
        <depDialog
          ref="dialogFormRef"
          :close-dialog="closeDialog"
          :pid="curId"
          :get-department="getDepartment"
          :is-edit="isEdit"
          :origin-list="originList"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { loadDepartment, deleteDepartment } from '@/api/departments'
import { array2Tree } from '@/utils'
import depDialog from './depDialog.vue'
export default {
  name: '',
  components: {
    depDialog
  },
  data() {
    return {
      originList: [], // 子组件表单验证简单数据
      // 弹出窗是否显示
      dialogVisible: false,
      // 弹出标题
      title: '添加子部门',
      list: [],
      curId: '', // 被选中的id
      isEdit: false // 弹框状态

    }
  },
  created() {
    // 初始化时请求用户简单数据
    this.getDepartment()
  },
  methods: {
    //! 1.请求到部门数据
    async getDepartment() {
      const res = await loadDepartment()
      // console.log(res)
      // 去除第一个元素的数据
      res.data.depts.splice(0, 1)
      // 获取到表单验证的
      this.originList = res.data.depts.map(item => {
        return {
          id: item.id,
          pid: item.pid,
          name: item.name,
          code: item.code
        }
      })
      // console.log()
      this.list = array2Tree(res.data.depts, '')
    },
    //! 2.添加信息
    hAdd(id) {
      // alert(1)
      this.curId = id
      this.isEdit = false // 编辑状态
      this.title = '添加子部门'
      this.dialogVisible = true
    },
    // ! 3.编辑信息z
    hEdit(id) {
      this.curId = id
      this.isEdit = true // 编辑状态
      this.title = '编辑部门'
      this.dialogVisible = true

      // 获取弹窗的dom对象  在vue 中 数据更新之后视图发生变化 这个过程是异步的
      // console.log(this.$refs.dialogFormRef) undefined
      this.$nextTick(() => {
        // 这个对象 就是 组件对象 可以操作这个组件的数据和方法
        // console.log(this.$refs.dialogFormRef)
      })
    },
    //! 4.删除数据 ,优化 删除之前判断是否有子元素
    hDelete(id, children) {
      // console.log()
      // 需要判读当前部门是否有子部门 如果有则无法被删除
      if (children[0]) {
        this.$message.warning('当前部门有子部门,无法删除哦!')
      } else {
        this.$confirm('您确定要删除部门吗', '提示', {
          type: 'warning',
          confirmButtonText: '确认删除',
          cancelButtonText: '取消'
        }).then(
          async() => {
          //
            try {
            // 发送请求删除
              const res = await deleteDepartment(id)
              // 刷新列表
              this.getDepartment()
              this.$message.success(res.message)
            } catch (error) {
              this.$message.error(error.message)
            }
          },
          () => {
            this.$message.info('取消了操作.')
          }
        )
      }
    },
    //! 5.关闭弹窗的方法
    closeDialog() {
      this.dialogVisible = false
    }

  }
}
</script>

<style scoped>
.el-card {
  padding: 20px;
}
</style>
